<!--  -->
<template>
  <div>
    <div v-if="showFlag">
      <!-- Toast提示专用 -->
      <van-toast id="van-toast" />
      <van-notice-bar text=" قولاي ئۈندىدار ئەپچىمىز ئېچىۋېتىلدى ، يېڭىچە ئىقتىدارلار قوشىلىۋاتىدۇ ، شىركىتىمىزگە مەبلەغ ئىزدەيمىز" />
      <div class="container">
        <div class="inputContainer">
          <input
            class="input"
            v-model="phoneNumber"
            type="number"
            @input="validateNumber"
            focus
            placeholder="يانفۇن نومۇرىڭىزنى كىرگۈزۈڭ"
            placeholder-style="font-size:12px;font-family:'Alp Ekran'"
          >
        </div>
        <div
          class="repeat"
          v-if="numFlag"
        >
          <span class="sameNumber">{{partNumber}}</span>
          <span class="company">{{company}}</span>
          <!-- <span class="address">{{}}</span> -->
        </div>
        <div class="price">
          <div class="title">
            قاچىلىماقچى بولغان سوممىنى تاللاڭ
          </div>

          <div class="priceContainer">
            <div
              class="unitPrice"
              @click="changeColor(index)"
              :class="{active:index==isActive}"
              v-for="(item,index) in priceList"
              :key="item.id"
            >
              <span class="normalPrice">{{item.normalPrice}}يۈەن</span>
              <span class="sellPrice">سېتىلىش باھا {{item.sellPrice}}￥</span>
            </div>

          </div>
        </div>
        <div class="more">
          <van-button
            @click="submitOrder"
            plain
            type="primary"
            size="large"
          >قاچىلاش</van-button>
        </div>
        <div class="advertise">
          <ad unit-id="adunit-9155bec8aa4c0615"></ad>
        </div>
        <div class="charge-notice">
          <div>قاچىلاش ئۇسۇلى: تېلىفۇن نومۇرىڭىزنى كىرگۈزسىڭىز ئۆلچەملىك باھاسىنى كۆرەلەيسىز.
          </div>
          <div>سەمىمىي ئەسكەرتىش: نورمال بولغاندا سىز پۇل تاپشۇرغاندىن كېيىن بىر مىنۇت ئىچىدە پۇل قاچىلىنىپ بولىدۇ ، ئەگەر پۇل تۆلەپ 10 مىنۇت ئىچىدە پۇل كىرمىسە بىز بىلەن ئالاقىلىشىڭ .
          </div>
          <div @longpress="copyNum">يانفۇن نومۇر ، ئۈندىدار : 13122060027</div>
        </div>
        <!-- :style="{backgroundColor:backgroundColor,color:activeColor,borderColor: borderColor}" -->
      </div>
    </div>
    <div v-if="!showFlag">
      <div class="developing">
        <h1>功能正在开发中...</h1>
        <div>ئىقتىدار ئەتە ئېچىلىدۇ...</div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "md5";
import {
  showToast,
  showTimerToast,
  randomNumber,
  randomChar,
  post
} from "@/util";
import qs from "qs";
export default {
  data() {
    return {
      isActive: -1,
      numFlag: false,
      showFlag: false,
      company: "",
      phoneNumber: "",
      divIndex: "",
      backgroundColor: "#fff",
      activeColor: "#19be6b",
      borderColor: "#19be6b",
      normalPrice: "",
      sellPrice: "",
      priceList: [
        { id: 0, normalPrice: 1, sellPrice: 1.3 },
        { id: 1, normalPrice: 2, sellPrice: 2.5 },
        { id: 2, normalPrice: 5, sellPrice: 5.5 },
        { id: 3, normalPrice: 10, sellPrice: 10.5 },
        { id: 4, normalPrice: 20, sellPrice: 20.5 },
        { id: 5, normalPrice: 30, sellPrice: 30.5 },
        { id: 6, normalPrice: 50, sellPrice: 50.5 },
        { id: 7, normalPrice: 100, sellPrice: 100.0 },
        { id: 8, normalPrice: 200, sellPrice: 200.0 },
        { id: 9, normalPrice: 300, sellPrice: 300.0 }
      ]
    };
  },
  methods: {
    changeColor(index) {
      this.isActive = index;
      this.divIndex = index;
    },
    submitOrder() {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.phoneNumber)) {
        showTimerToast("توغرا يانفۇن نومۇرنى كىرگۈزۈڭ", 1000);
      } else if (this.isActive < 0) {
        showTimerToast("سوممىنى تاللاڭ", 700);
      } else {
        wx.showLoading();
        // 发起请求
        let urlJuhe = "https://op.juhe.cn/ofpay/mobile/telquery",
          dataJuhe = qs.stringify({
            phoneno: this.phoneNumber,
            cardnum: parseInt(this.priceList[this.divIndex].normalPrice),
            key: "e36637c708e516dab0587cac1090a23e"
          });
        this.$http.get(urlJuhe, dataJuhe).then(res => {
          if (res.data.error_code == 0) {
            this.sellPrice = this.priceList[this.divIndex].sellPrice;
            this.normalPrice = res.data.result.inprice;
            let openID = wx.getStorageSync("userInfo").openId,
              orderID = randomNumber(),
              payAmount = Math.ceil(
                this.priceList[this.divIndex].sellPrice * 100
              );
            let payURL = "https://wx.2xur7.cn/weapp/wxPay";
            if (openID) {
              this.$http
                .post(payURL, {
                  openID: openID,
                  orderID: orderID,
                  total_fee: payAmount
                })
                .then(res => {
                  var paymentInfo = res.data.data;
                  wx.requestPayment({
                    timeStamp: paymentInfo.timeStamp, //时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间,
                    nonceStr: paymentInfo.nonceStr, //随机字符串，长度为32个字符以下,
                    package: paymentInfo.package, //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*,
                    signType: paymentInfo.signType, //签名算法，暂支持 MD5,
                    paySign: paymentInfo.paySign, //签名,具体签名方案参见小程序支付接口文档,
                    success: res => {
                      wx.hideLoading();
                      let savURL = "https://wx.2xur7.cn/weapp/addOrder", //存储数据
                        orderdata = {
                          open_id: openID,
                          tel_number: this.phoneNumber,
                          order_type: "phoneCharge",
                          order_info: JSON.stringify(paymentInfo),
                          order_id: orderID,
                          goods_val: `${
                            this.priceList[this.divIndex].normalPrice
                          }元`,
                          normal_price: this.priceList[this.divIndex]
                            .normalPrice,
                          sell_price: this.priceList[this.divIndex].sellPrice,
                          profit: Number(
                            this.priceList[this.divIndex].sellPrice -
                              this.priceList[this.divIndex].normalPrice
                          ).toFixed(2)
                        };
                      // console.log(orderdata);
                      this.$http.post(savURL, orderdata).then(res => {
                        if (!res.data.data.msg) {
                          showTimerToast(
                            "مەغلۇپ بولدى ، ئۈندىدارنى قېتىڭ",
                            1000
                          );
                          wx.setClipboardData({
                            data: "13122060027", //需要设置的内容,
                            success: res => {
                              showTimerToast("ئۈندىدار كۆچۈرۈلدى", 3000);
                            }
                          });
                        } else {
                          showTimerToast("مۇۋەپپىقىيەتلىك بولدى", 3000);
                        }
                      });
                      // 充值花费
                      /* let chargeURL =
                          "https://op.juhe.cn/ofpay/mobile/onlineorder",
                        chargeData = {
                          phoneno: this.phoneNumber,
                          cardnum: this.priceList[this.divIndex].normalPrice,
                          orderid: orderID,
                          key: "e36637c708e516dab0587cac1090a23e",
                          sign: md5(
                            "JH71c2c82294299eb8c6d01d0a2a898301" +
                              "e36637c708e516dab0587cac1090a23e" +
                              this.phoneNumber +
                              this.priceList[this.divIndex].normalPrice +
                              orderID
                          )
                        };
                      this.$http
                        .get(chargeURL, chargeData)
                        .then(res => {
                          showToast("مۇۋەپپىقىيەتلىك قاچىلاندى", 1000);
                        })
                        .catch(err => {
                          showToast(
                            "مەغلۇپ بولدى، بىز بىلان ئالاقىلىشىڭ",
                            1000
                          );
                        }); */
                    },
                    fail: () => {
                      wx.hideLoading();
                    },
                    complete: () => {}
                  });
                });
            }
          }
        });
      }
    },
    validateNumber() {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (myreg.test(this.phoneNumber)) {
      }
      if (this.phoneNumber.length == 11) {
        let url =
          "https://v.juhe.cn/flow/telcheck?key=b8577718ff049042b8dbbb1278ad77f3&phone=" +
          this.phoneNumber;
        this.$http.get(url).then(res => {
          // console.log(res.data.result);
          this.company = res.data.result[0].company;
          // 运营商翻译
          if (res.data.result[0].company == "中国联通") {
            this.company = "بىرلەشمە خەۋەرلىشىش";
          }
          if (res.data.result[0].company == "中国电信") {
            this.company = "جۇڭگو تېلىگراف";
          }
          if (res.data.result[0].company == "中国移动") {
            this.company = "كۆچمە خەۋەرلىشىش";
          }
        });
      }
    },
    copyNum() {
      wx.setClipboardData({
        data: "13122060027", //需要设置的内容,
        success: res => {
          showTimerToast("تېلىفۇن نومۇر كۆچۈرۈلدى", 2000);
        }
      });
    }
  },
  components: {},
  computed: {
    partNumber() {
      if (this.phoneNumber.length == 11) {
        this.numFlag = true;
        var reg = /^(\d{3})(\d{4})(\d{4})$/;
        var matches = reg.exec(this.phoneNumber);
        return matches[1] + " " + matches[2] + " " + matches[3];
      }
    }
  },
  onLoad() {
    let { state } = wx.getStorageSync("config");
    if (state == "enter") {
      this.showFlag = true;
    } else {
      this.showFlag = false;
    }
  }
};
</script>
<style lang='scss'>
page {
  background-color: #fff;
  // background-color: #f0eff5;
}
.active {
  background-color: #19be6b !important;
  color: #fff !important;
  border-color: #ccc !important;
  transition: all 0.5s ease-in-out;
  transform: scaleX(1);
  :active {
    transform: scaleX(1);
  }
}
.container {
  .advertise {
    width: 92%;
    margin: 0 auto;
    margin-top: 12rpx;
  }
  width: 100%;
  margin-top: 25rpx;
  background-color: #fff;
  .inputContainer {
    padding-top: 30rpx;
    border-radius: 2px;
    margin: 10rpx auto;
    width: 95%;
    border-top: 1px solid #efeff4;
    border-bottom: 1px solid #efeff4;
    // box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.3);
    .input {
      color: #000;
      font-weight: bold;
      padding-bottom: 15rpx;
      padding-left: 20rpx;
      font-size: 40rpx;
    }
  }
  .price {
    width: 92%;
    margin: 0 auto;
    .title {
      text-align: right;
      color: #999;
      font-size: 20rpx;
      margin-top: 9rpx;
      margin-right: 30rpx;
      margin-bottom: 10rpx;
    }
    .priceContainer {
      display: flex;
      flex-wrap: wrap;
      // justify-content: center;
      justify-content: space-between;
      .unitPrice {
        color: #19be6b;
        border: solid 2rpx #19be6b;
        height: 120rpx;
        width: 30%;
        border-radius: 5px;
        margin-left: 8rpx;
        margin-right: 8rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        margin: 8rpx 1%;
        .normalPrice {
          direction: rtl;
          margin-top: 10rpx;
          // color: #19be6b;
          line-height: 57rpx;
          font-weight: 100;
          font-size: 34rpx;
        }
        .sellPrice {
          font-size: 25rpx;
          // color: #19be6b;
          font-weight: 100;
          direction: rtl;
        }
      }
    }
  }
  .more {
    width: 90%;
    margin: 0 auto;
    margin-top: 30rpx;
    // height: 100rpx;
  }
  .repeat {
    width: 94%;
    margin-left: 3%;
    border-bottom: 1px solid #efeff4;
    display: inline-block;
    height: 60rpx;
    .sameNumber {
      float: left;
      margin-top: -2rpx;
      margin-left: 10rpx;
      color: #19be6b;
      font-size: 45rpx;
    }
    .company {
      margin-top: 5px;
      text-align: right;
      color: #666;
      float: right;
      font-size: 26rpx;
      margin-right: 29rpx;
    }
  }
}
.developing {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250rpx;
  margin-top: -250rpx;
  // line-height: 300rpx;
  text-align: center;
  color: #fff;
  width: 500rpx;
  height: 300rpx;
  border-radius: 15px;
  background-color: #000;
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.charge-notice {
  width: 88%;
  height: 320rpx;
  margin: 0 auto;
  margin-top: 15rpx;
  // box-shadow: 0 0 7rpx 3rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid #19be6b;
  border-radius: 20rpx;
  padding: 10rpx 10rpx;
  direction: rtl;
  font-size: 30rpx;
  text-indent: 1em;
  color: #19be6b;
  line-height: 1.5em;
}
</style>